<template>
  <!-- 添加或修改盘点计划对话框 -->
  <el-dialog :title="title" v-model="open" width="1200px" append-to-body>
    <div style="padding: 20px; border-bottom: 1px solid #ccc">
      根据《中华人民共和国网络安全法》及相关法律的规定，用户需要提供真实身份信息，否则网络运营者不得为其提供相关服务。
      开发者实名认证信息资料填写规范如下：<br />
      1. 保证所填写的全部信息真实且与实际信息对应，否则出示驳回意见；<br />
      2.与入件资质相关字段填写正确，特别的：企业名称、统一社会信用代码、营业期限、法人代表人姓名、证件号码、证件有效期要与上传的证件照片保持一致，否则出示驳回意见；<br />
      3. 相关资质上传要求如下，如若不符，出示驳回意见。<br />
      1）图片清晰且边框完整；
    </div>
    <el-descriptions class="margin-top" :column="3" size="large" border>
      <el-descriptions-item width="120">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            姓名
          </div>
        </template>
        {{ form.realName }}
      </el-descriptions-item>
      <el-descriptions-item width="120">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            手机号
          </div>
        </template>
        {{ form.lpMobile }}
      </el-descriptions-item>
      <el-descriptions-item width="120">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            身份证号
          </div>
        </template>
        {{ form.identityCard }}
      </el-descriptions-item>
      <el-descriptions-item width="120">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Calendar />
            </el-icon>
            有效期
          </div>
        </template>
        {{ getTime(form.identityStarttime) + '-' + getTime(form.identityEndtime) }}
      </el-descriptions-item>
      <el-descriptions-item width="120">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            地址
          </div>
        </template>
        <el-tag size="small">{{ getAddr() }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item width="120">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <ChatLineRound />
            </el-icon>
            邮箱
          </div>
        </template>
        <el-tag size="small">{{ form.email }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item span="3">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            详细地址
          </div>
        </template>
        {{ form.address }}
      </el-descriptions-item>
      <el-descriptions-item span="1.5">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            身份证正面
          </div>
        </template>
        <ImagePreview :width="170" :height="170" :src="form.identityFront" :preview-src-list="[form.identityFront]" />
      </el-descriptions-item>
      <el-descriptions-item width="120">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            身份证反面
          </div>
        </template>
        <ImagePreview :width="170" :height="170" :src="form.identityContrary" :preview-src-list="[form.identityContrary]" />
      </el-descriptions-item>
    </el-descriptions>
    <el-form ref="form" :inline="false" :model="auditForm" :rules="rules" label-width="140px" style="padding-top: 30px" v-loading="loading">
      <el-form-item label="审核状态:" prop="attestationStatus">
        <el-select @change="auditChange" style="width: 200px" v-model="auditForm.attestationStatus" placeholder="请选择审核状态">
          <el-option :value="1" key="1" label="审核通过"></el-option>
          <el-option :value="2" key="2" label="驳回"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="auditForm.attestationStatus == 2" label="备注:" prop="remark">
        <el-input type="textarea" rows="4" v-model="auditForm.remark" placeholder="请输入驳回理由"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button :type="auditForm.attestationStatus == 1 ? 'primary' : 'danger'" @click="submitForm" :loading="loading">
          {{ auditForm.attestationStatus == 1 ? '审核通过' : '驳回' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script >
import { globalHeaders } from '@/utils/request';
import { getSMSCode } from '@/api/login';
import { auditTenantAttestation } from '@/api/system/tenantAttestation';
import * as Verify from '@/utils/verify';
import moment from 'moment';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
import { provinceAndCityData, pcTextArr, regionData, pcaTextArr, codeToText } from 'element-china-area-data';
import { cloneVNode } from 'vue';

export default {
  name: 'personCertificateAudit',
  data() {
    return {
      id: null, //必须配置，编辑需要赋值
      open: false,
      title: '审核认证信息',
      loading: false,
      form: {
        tenantType: 1
      },
      auditForm: {
        attestationStatus: 1
      },
      times: 60,
      defTimes: 60,
      smsState: false,
      dateRange: [],
      iconStyle: { color: '#1890ff', fontSize: '16px' },
      rules: {
        attestationStatus: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
        identityCard: [
          { required: true, message: '身份证号不能为空', trigger: 'blur' },
          { validator: this.isIDCard, trigger: 'blur' }
        ],
        country: [{ required: true, message: '请选择地址', trigger: 'change' }],
        address: [{ required: true, message: '详细地址不能为空', trigger: 'change' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: this.isEmail, trigger: 'blur' }
        ],
        identityFront: [{ required: true, message: '请上传身份证正面', trigger: 'blur' }],
        identityContrary: [{ required: true, message: '请上传身份证反面', trigger: 'blur' }],
        lpMobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: this.isPhone, trigger: 'blur' }
        ],
        smsCode: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      },
      uploadUrl: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload',
      headers: globalHeaders(),
      options: regionData
    };
  },
  created() {},
  methods: {
    getTime(timeStr) {
      return moment(timeStr).format('YYYY-MM-DD');
    },
    show(authForm) {
      this.open = true;
      this.form = JSON.parse(JSON.stringify(authForm));
      this.auditForm.attestationStatus = 1;
    },
    cancel() {
      this.open = false;
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          auditTenantAttestation({ ...this.form, ...this.auditForm })
            .then((res) => {
              if (res.code == 200) {
                this.$modal.msgSuccess('提交成功');
                this.open = false;
                this.$emit('ok');
              } else {
                this.$modal.msgError('提交失败:' + res.msg);
              }
            })
            .catch(() => {});
        }
      });
    },
    auditChange(e) {
      console.log(e);
    },
    getAddr() {
      let arr = this.form.district.split(',').map((item) => codeToText[item]);
      return arr.join('/');
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}

.mark {
  width: 18px;
  margin-right: 10px;
}

.avatar-uploader,
.el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px !important;
  height: 120px;
  // display: inline-block;
  margin-right: 10px;
}

.avatar-uploader:hover,
.el-upload:hover {
  border-color: #409eff;
}

.imgs {
  display: inline-block;
}

.avatar-uploader__img {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px !important;
  height: 120px;
  display: inline-block;
  margin-right: 10px;

  img {
    width: 120px !important;
    height: 120px;
    object-fit: fill;
  }
}

.btn {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 120px !important;
  height: 120px;
  border-radius: 0 6px 0 6px;
  text-align: center;
  line-height: 120px;
}

.avatar-uploader:hover {
  // 鼠标悬浮显示按钮
  .btn {
    display: block;
  }
}

.upload-text {
  font-size: 14px;
  color: #8c939d;
  line-height: 20px;
  text-align: center;
  margin: 0 auto;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.card-info-item {
  width: 450px;
}

.content-img {
  display: flex;
  padding-top: 40px;
  // justify-content: space-between;
}

.card {
  margin-top: 20px;
}

.form-item__label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}

.active {
  color: #409eff;
}

.un-active {
  color: #c0c4cc;
}

.margin-top {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;

  .el-icon {
    margin-right: 6px;
  }
}
</style>